/**
 * @description 雷达图组件
 * @date 2024.9.10
 * @author wz
 * @midify 2025.5.15
 * @editor wz
 */
import { _decorator, CCBoolean, CCFloat, Color, Component, Graphics, Label, Node, Prefab, UITransform, v2, Vec2 } from 'cc';
const { ccclass, property } = _decorator;
// 1. 温馨柔和风格
// 填充颜色: #F5DEB3 (淡杏色)
// 线条颜色: #FFA07A (浅鲑鱼色)
// 2. 蓝色调风格
// 填充颜色: #ADD8E6 (浅蓝色)
// 线条颜色: #00BFFF (亮蓝色)
// 3. 绿色调风格
// 填充颜色: #90EE90 (浅绿色)
// 线条颜色: #228B22 (深绿色)
// 4. 紫色调风格
// 填充颜色: #E6E6FA (浅紫色)
// 线条颜色: #8A2BE2 (亮紫色)
// 5. 橙色调风格
// 填充颜色: #FFDAB9 (浅橙色)
// 线条颜色: #FF8C00 (橙色)
@ccclass('CRadar')
export default class CRadar extends Component {
    @property({ type: CCBoolean, tooltip: '绘制背景', displayName: '绘制背景' })
    isDrawBg = true

    @property({ type: Number, tooltip: '背景线条宽度', displayName: '背景线条宽度', visible() { return this.isDrawBg } })
    bgLineWidth = 2;

    @property({ type: Color, tooltip: '背景线条颜色', displayName: '背景线条颜色', visible() { return this.isDrawBg } })
    bgLineColor = new Color('#00BFFF');

    @property({ type: CCFloat, tooltip: '雷达背景层', displayName: '雷达背景层', visible() { return this.isDrawBg } })
    layer = 5;

    @property({ type: Number, tooltip: '线条宽度', displayName: '线条宽度' })
    lineWidth = 2;

    @property({ type: Color, tooltip: '线条颜色', displayName: '线条颜色' })
    lineColor = new Color('#F5DEB3');

    @property({ type: Color, tooltip: '填充颜色', displayName: '填充颜色' })
    fillColor = new Color('#ADD8E696');

    @property({ type: Color, tooltip: '点颜色', displayName: '点颜色' })
    pointColor = new Color('#ADD8E6');

    @property({ type: CCFloat, tooltip: '数据点半径' })
    pointRadius = 5;

    @property({ type: CCFloat, tooltip: '雷达半径' })
    radius = 200;



    @property({ type: [CCFloat], tooltip: '数据点百分比数据' })
    points = [50, 80, 60, 40, 70];

    get graphics() {
        return this.getComponent(Graphics);
    }
    start() {
        this.draw();
    }

    /**
     * 获取点
     * @param center 
     * @param numVertices 
     * @param angleIncrement 
     * @param points 
     * @returns 
     */
    getVertices(center: Vec2, numVertices: number, angleIncrement: number, points: number[]) {
        const vertices: Vec2[] = [];
        for (let i = 0; i < numVertices; i++) {
            const angle = i * angleIncrement;
            const radius = this.radius * points[i] / 100; // 假设数据范围为 0-100
            const x = center.x + radius * Math.cos(angle);
            const y = center.y + radius * Math.sin(angle);
            vertices.push(new Vec2(x, y));
        }
        return vertices;
    }

    /**
     * 画多边形
     * @param vertices 
     */
    movePolygon(vertices: Vec2[]) {
        this.graphics.moveTo(vertices[0].x, vertices[0].y);
        for (let i = 0; i < vertices.length; i++) {
            let index = (i + 1) % vertices.length
            this.graphics.lineTo(vertices[index].x, vertices[index].y);
        }

    }

    /**
     * 绘制轴线
     * @param vertices 
     */
    moveShaft(center: Vec2, vertices: Vec2[]) {
        for (let i = 0; i < vertices.length; i++) {
            const start = center;
            const end = vertices[i];
            this.graphics.moveTo(start.x, start.y);
            this.graphics.lineTo(end.x, end.y);
        }
    }

    draw(callback?: (postions: Vec2[]) => void) {
        const center = v2(0, 0)
        const numVertices = this.points.length;
        const angleIncrement = Math.PI * 2 / numVertices;

        // 清除之前的绘制
        this.graphics.clear();


        // 绘制背景多边形
        if (this.isDrawBg) {
            for (let i = 1; i <= this.layer; i++) {
                let points = new Array(numVertices).fill(i * 100 / this.layer);
                let vertices = this.getVertices(center, numVertices, angleIncrement, points);
                //多边形
                this.movePolygon(vertices);
                // 轴线
                if (i == this.layer) {
                    this.moveShaft(center, vertices);
                }
            }
            this.graphics.strokeColor = this.bgLineColor;
            this.graphics.lineWidth = this.bgLineWidth;
            this.graphics.stroke();
        }

        // 数据
        let vertices = this.getVertices(center, numVertices, angleIncrement, this.points);
        this.movePolygon(vertices);

        this.graphics.strokeColor = this.lineColor;
        this.graphics.lineWidth = this.lineWidth;
        this.graphics.stroke();

        this.graphics.fillColor = this.fillColor;
        this.graphics.fill()

        // 数据点圆
        for (let i = 0; i < vertices.length; i++) {
            this.graphics.circle(vertices[i].x, vertices[i].y, this.pointRadius);
            this.graphics.fillColor = this.pointColor
            this.graphics.fill()
        }

        //回调把位置传回去
        if (callback) callback(vertices);
    }
}


